<template>
  <page class="app-container">
    <!-- 过滤条件 begin-->
    <el-form :inline="true" class="filter-container">
      <el-form-item prop="shopId" label="当前门店">
        <shop-select v-model="searchForm.shopId"></shop-select>
      </el-form-item>
      <el-form-item label="时间段">
        <el-date-picker
          v-model="time"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="onSearch">查询
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button class="filter-item" type="primary" @click="onShift(undefined)" v-if="!hasShift">新建交班</el-button>
      </el-form-item>
    </el-form>
    <!-- 过滤条件 end-->

    <!-- 表格 begin-->
    <el-table :data="list" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <ul class="form-preview clearfix">
            <li>
              <span>订单笔数</span>
              <span>{{ props.row.orderTotal }}笔</span>
            </li>
            <li>
              <span>异常笔数</span>
              <span>{{ props.row.errorNum }}笔</span>
            </li>
            <li>
              <span>退款订单笔数</span>
              <span>{{ props.row.refundNum }}笔</span>
            </li>
            <li>
              <span>订单总额</span>
              <span>{{ props.row.totalMoney / 100 }}元</span>
            </li>
            <li>
              <span>折扣金额</span>
              <span>{{ props.row.discount / 100}}元</span>
            </li>
            <li>
              <span>退款金额</span>
              <span>{{ props.row.refund / 100}}元</span>
            </li>
            <li>
              <span>实收金额</span>
              <span>{{ props.row.income / 100 }}元</span>
            </li>
            <li>
              <span>微信油品</span>
              <span>{{ props.row.wxoil / 100}}元</span>
            </li>
            <li>
              <span>微信商品</span>
              <span>{{ props.row.wxCommodity / 100}}元</span>
            </li>
            <li>
              <span>异常金额</span>
              <span>{{ props.row.errorMoney / 100}}元</span>
            </li>
            <li>
              <span>送出积分</span>
              <span>{{ props.row.totalIntagral }}个</span>
            </li>
          </ul>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="交班编号" min-width="90"></el-table-column>

      <el-table-column prop="shiftName" label="交班名称" min-width="90" show-overflow-tooltip></el-table-column>

      <el-table-column prop="operator" label="值班员" width="120" align="center"></el-table-column>

      <el-table-column label="实收金额">
        <template slot-scope="props">{{props.row.income / 100}}元</template>
      </el-table-column>

      <el-table-column label="订单开始时间" width="180">
        <template slot-scope="props">{{props.row.stratDate | dataFormat}}</template>
      </el-table-column>

      <el-table-column label="订单截止时间" width="180">
        <template slot-scope="props">
          <template v-if="props.row.endDate"> {{props.row.endDate | dataFormat}}</template>
          <el-tag type="warning" v-else>正在值班</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" width="280" fixed="right">
        <template slot-scope="scope">
          <router-link :to="{name: 'shiftDetailTab', query: {shiftId: scope.row.id, shopId: searchForm.shopId}}">
            <el-button size="mini" type="primary">查看明细</el-button>
          </router-link>
          <el-button size="mini" @click="onRefresh(scope.row.id)">刷新数据</el-button>
          <el-button size="mini" v-if="!scope.row.isShift" @click="onShift(scope.row.id)">交班</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格 end-->

    <!--分页 begin-->
    <div class="pagination-container mt20">
      <el-pagination background @current-change="onPageChange" :current-page="searchForm.page" :page-size="limit"
                     layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <!--分页 begin-->

    <!--交班 弹窗 begin-->
    <el-dialog :title="dataForm.shiftId !== undefined?'交班': '新建交班'" :visible.sync="dialogShow">
      <el-form ref="dataForm" :model="dataForm" label-position="left" label-width="120px"
               style='width: 400px; margin-left:50px;'>
        <el-form-item label="交班名称" prop="name" :rules="[{required: true, message: '请输入交班人名称'}]">
          <el-autocomplete v-model="dataForm.name" :fetch-suggestions="querySearch" placeholder="请输入交班人名称"
                           :clearable="true"></el-autocomplete>
        </el-form-item>
        <el-form-item label="交接人" prop="worker" :rules="[{required: true, message: '请输入交接人'}]">
          <el-input placeholder="请输入交接人" v-model="dataForm.worker"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">确认</el-button>
      </div>
    </el-dialog>
    <!--交班 end-->
  </page>
</template>

<script>
  import ShopList from "../门店列表/index";
  import {timeMap} from '@/utils/widget'
  import {elValidate} from '@/utils/widget'
  import {status_prompt} from '@/utils/feedback'

  export default {
    name: "shiftList",
    components: {ShopList},
    data() {
      return {
        list: [],
        total: 0,
        limit: 0,
        listLoading: true,
        hasShift: true, // 是否有值班
        searchForm: {
          page: 1,
          date1: null,
          date2: null,
        },
        dialogShow: false,
        restaurants: [{"value": "早班"}, {"value": "中班"}, {"value": "晚班"}],
        dataForm: {}
      }
    },
    computed: {
      time: timeMap('searchForm.date1', 'searchForm.date2')
    },
    activated() {
      this.searchForm.shopId !== undefined && this.getList()
    },
    methods: {
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      async getList() {
        const {total, list, limit} = await this.$get_list('admin/shift/getShiftByCondition', this.searchForm)
        Object.assign(this, {total, list, limit})
      },
      onDownload() {
      },
      // 获取是否有存在值班
      async getHasShift() {
        let r = await this.$get('admin/shift/haveWorkShift', {shopId: this.searchForm.shopId})
        this.hasShift = r.obj
      },

      // 交班
      onShift(shiftId) {
        this.dialogShow = true
        this.dataForm.shiftId = shiftId
      },

      // 搜索
      onSearch() {
        this.searchForm.page = 1
        this.getList()
      },

      // 分页
      onPageChange(val) {
        this.searchForm.page = val
        this.getList()
      },

      // 提交交班
      async onSubmit() {
        await elValidate(this, 'dataForm')
        const form = {
          shopId: this.searchForm.shopId,
          ...this.dataForm
        }
        status_prompt({
          ajax: () => this.$post('admin/shift/shiftOverAndNew', form),
          success_text: '交班成功',
          fail_text: '交班失败'
        }).then(_ => {
          this.getList()
          this.$refs.dataForm.clearValidate()
          this.$refs.dataForm.resetFields()
        })
        this.dialogShow = false
      },

      // 刷新并触发后台矫正数据
      onRefresh(shiftId) {
        status_prompt({
          ajax: () => this.$post('admin/shift/checkShift', {shiftId, type: true}),
          success_text: '刷新成功',
          fail_text: '刷新失败'
        }).then(this.getList)
      }
    },
    watch: {
      'searchForm.shopId'() {
        this.getHasShift()
        this.getList()
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .form-preview {
    list-style: none;
    line-height: 40px;
    font-size: 15px;
    max-width: 880px;
    li {
      display: table;
      float: left;
      width: 33.33%;
    }
    span {
      display: table-cell;
    }
    span:first-child {
      width: 100px;
      color: #99a9bf !important;
    }
    span:last-child {
      //text-align: right;
      padding-right: 80px;
    }
  }
</style>
